/*
 * @Author: 大柒
 * @QQ: 531310591@qq.com
 * @Version: Auto Js Pro 7.0.2-1
 * @Date: 2021-05-31 03:31:27
 * @LastEditTime: 2021-05-31 04:09:02
 * @LastEditors: 大柒
 * @Description: 自定义控件 widget-switch-se7en 开关 
 * 
 * attr参数
 * thumbSize:滑块大小 使用此参数滑块的宽高将一致
 * thumbWidth:滑块宽度 不能与thumbSize一起使用
 * thumbHeight:滑块高度 不能与thumbSize一起使用
 * thumbPadding:滑块内边距 
 * trackColor:轨道选中颜色
 * radius:开关圆角 
 * 未经作者的许可，此代码仅用于学习，不能用于其他用途。
 */
'ui';

require('./widget-switch-se7en');

ui.layout(
    <vertical>
        <widget-switch-se7en text='默认样式' padding='16 8' />
        <widget-switch-se7en text='方形开关' padding='16 8'
            radius='0'
            trackColor='#003366' />
        <widget-switch-se7en text='圆角开关' padding='16 8'
            radius='6'
            trackColor='#003366' />
        <widget-switch-se7en text='椭圆开关' padding='16 8'
            thumbWidth='32'
            thumbHeight='24'
            radius='12'
            trackColor='#003366' />
        <widget-switch-se7en text='文字开关' padding='16 8'
            id='文字开关'
            thumbWidth='32'
            thumbHeight='24'
            radius='12'
            trackColor='#003366' />
        <widget-switch-se7en text='边框开关' padding='16 8'
            id='边框开关'
            thumbPadding='1.5'
            thumbWidth='32'
            thumbHeight='24'
            radius='12'
            trackColor='#003366' />
        <widget-switch-se7en text='异形开关' padding='16 8'
            id='异形开关' />

        {{/** 动态修改  */ }}
        <text id='width_t' text='thumbWidth:24dp' margin='10 10 10 0' />
        <seekbar id='width' progress='32' />
        <text id='height_t' text='thumbHeight:24dp' margin='10 0' />
        <seekbar id='height' progress='32' />
        <text id='radius_t' text='radius:0dp' margin='10 0' />
        <seekbar id='radius' progress='0' />
        <widget-switch-se7en id='switch' layout_gravity='center' padding='8'
            w='auto'
            thumbSize='24'
            radius='0'
            trackColor='#003366' />
    </vertical>
);

/** 文字开关 */
ui.文字开关.setThumbTexts('on', 'off');
ui.文字开关.setThumbTextColors('#003366', '#999999');

/** 边框开关 */
ui.边框开关.restructure(function (view, track, thumb, dp2px) {
    //设置轨道边框
    track.gd.setStroke(2, colors.parseColor('#999999'));
    view.setThumbTexts('on', 'off');
    view.setTrackTintList(null);
    view.setThumbTintList(view.createColorStateList('#7A999999', '#003366'));
});

/**重建Switch
 * view 控件视图
 * track 开关轨道
 * track.gd: GradientDrawable具体用法自行百度
 * track.ld: LayerDrawable
 * thumb 开关滑块 与track同上
 * dp2px dp转px方法
 */
ui.异形开关.restructure(function (view, track, thumb, dp2px) {
    //设置滑块内边距
    view.setThumbPadding(2);
    //设置滑块宽度
    view.setThumbWidth(32);
    //设置滑块高度
    view.setThumbHeight(24);
    //设置轨道背景色
    track.gd.setColor(0x000000);
    //设置轨道边框
    track.gd.setStroke(2, colors.parseColor('#999999'));
    //虚线边框
    // track.gd.setStroke(2, colors.parseColor('#999999'), 20, 8);
    //设置异形圆角 
    let [d8, d10, d14, d16] = [dp2px(8), dp2px(10), dp2px(14), dp2px(16)];
    track.gd.setCornerRadii([d16, d10, d10, d16, d16, d10, d10, d16]);
    thumb.gd.setCornerRadii([d14, d8, d8, d14, d14, d8, d8, d14]);
    //显示文字
    view.setThumbTexts('on', 'off');
    //着色列表
    view.setTrackTintList(null);
    view.setThumbTintList(view.createColorStateList('#F13C4F', '#4BD963'));
});

/** 动态修改 */
//显示文字
ui.switch.setThumbTexts('on', 'off');
ui.switch.setThumbTextColors('#003366', '#999999');

ui.width.setOnSeekBarChangeListener({
    onProgressChanged: function (view, p) {
        ui.width_t.setText('thumbWidth:' + p + 'dp');
        ui.switch.setThumbWidth(p);
    }
});

ui.height.setOnSeekBarChangeListener({
    onProgressChanged: function (view, p) {
        ui.height_t.setText('thumbHeight:' + p + 'dp');
        ui.switch.setThumbHeight(p);
    }
});

ui.radius.setOnSeekBarChangeListener({
    onProgressChanged: function (view, p) {
        ui.radius_t.setText('radius:' + p + 'dp');
        ui.switch.setRadius(p);
    }
});